<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>问卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>问卷列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card class="box-card">
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getQuestionnaireList()">
            <el-button slot="append" icon="el-icon-search" @click="getQuestionnaireList()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加问卷</el-button>
        </el-col>
      </el-row>

      <!--用户列表区域-->
      <el-table :data="showUserList" border stripe @row-click="onRowClick" :row-class-name="tableRowClassName">
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column label="问卷id" prop="id" width="60">
        </el-table-column>
        <el-table-column label="标题" prop="title" width="180">
        </el-table-column>
        <el-table-column label="简介" prop="description" width="180">
        </el-table-column>
        <el-table-column label="开启时间" prop="startTime" >
        </el-table-column>
        <el-table-column label="结束时间" prop="endTime">
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime">
        </el-table-column>
        <!--        <el-table-column label="状态">
                  <template slot-scope="scope">
                    <el-switch
                      v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
                    </el-switch>
                  </template>
                </el-table-column>-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip content="查看已答卷者" placement="top">
              <el-button type="success" icon="el-icon-view" size="mini"
                         @click="showviewDialog(scope.row.id)"></el-button>
            </el-tooltip>
            <!--修改按钮-->
            <el-tooltip content="修改问卷" placement="top">
              <el-button type="primary" content="修改问卷信息" icon="el-icon-edit" size="mini"
                         @click="showEditDialog(scope.row)"></el-button>
            </el-tooltip>

            <!--删除按钮-->
            <el-tooltip content="删除问卷" placement="top">
              <el-button type="danger" content="删除问卷" icon="el-icon-delete" size="mini"
                         @click="removeQuestionById(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip content="批量查看问卷" placement="top">
              <el-button type="info" content="批量查看问卷" icon="el-icon-s-grid" size="mini"
                         @click="showData()"></el-button>
            </el-tooltip>
            <!--发布问卷按钮-->
            <!--            <el-tooltip effect="dark" content="发布问卷" placement="top" :enterable="false">
                          <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
                        </el-tooltip>-->
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!--添加用户的对话框-->
    <el-dialog
      title="添加问卷"
      :visible.sync="addDialogVisible"
      width="30%"
      @close="addDialogClosed">
      <!--内容主体区域-->
      <el-form :model="addForm" ref="addFormRef" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="description">
          <el-input v-model="addForm.description"></el-input>
        </el-form-item>
        <el-form-item label="开启时间" prop="startTime">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="addForm.startTime"
                            :picker-options="pickerOptionsStart"
                            value-format='yyyy-MM-dd HH:mm:ss' :editable="false"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="请选择结束时间" v-model="addForm.endTime"
                            value-format='yyyy-MM-dd HH:mm:ss' :editable="false" :picker-options="pickerOptionsEnd"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="请选择创建时间" v-model="addForm.createTime"
                            :picker-options="pickerOption"
                            value-format='yyyy-MM-dd HH:mm:ss' :editable="false"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <!--底部区域-->
      <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser(addForm)">确 定</el-button>
            </span>
    </el-dialog>

    <!--修改用户的对话框-->
    <el-dialog
      title="修改用户"
      :visible.sync="editDialogVisible"
      width="30%"
      @close="editDialogClosed">
      <!--修改用户内容区域-->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="id">
          <el-input v-model="editForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="description">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>
        <el-form-item label="开启时间" prop="startTime">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="请选择开始时间" v-model="editForm.startTime"
                            value-format='yyyy-MM-dd HH:mm:ss' :editable="false" :picker-options="pickerOptionsStart"
                            style="width: 100%;" disabled></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="请选择结束时间" v-model="editForm.endTime"
                            value-format='yyyy-MM-dd HH:mm:ss' :editable="false" :picker-options="pickerOptionsEnd"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="请选择创建时间" v-model="editForm.createTime"
                            value-format='yyyy-MM-dd HH:mm:ss' :editable="false"
                            style="width: 100%;" disabled></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="question">查看问题</el-button>
                <el-button type="primary" @click="editQuestion">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog
      title="已答卷者名单"
      :visible.sync="viewDialogVisible"
      width="70%"
      @close="viewDialogClosed">
      <el-table :data="showAnswerList" highlight-current-row ref="viewFormRef"
                @row-click="onRowClick" border stripe>
        <el-table-column label="#" type="index">
        </el-table-column>
        <!--          <el-table-column label="群组id" prop="groupId">-->
        <!--          </el-table-column>-->
        <el-table-column label="答者id" prop="id">
        </el-table-column>
        <el-table-column label="答者账号" prop="username">
        </el-table-column>
        <el-table-column label="答者名称" prop="name">
        </el-table-column>
        <el-table-column label="手机号码" prop="phone">
        </el-table-column>
        <el-table-column label="邮箱" prop="email">
        </el-table-column>
        <el-table-column label="操作" min-width="25%" prop="action">
          <template slot-scope="scope">
            <el-tooltip content="查看答卷" placement="top">
              <el-button type="success" icon="el-icon-view" size="mini" @click="showAnswer()"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="AnhandleSizeChange"
        @current-change="AnhandleCurrentChange"
        :current-page="queryInfoForReplier.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfoForReplier.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="answertotal">
      </el-pagination>
      <!--底部区域-->
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="viewDialogVisible = false">确 定</el-button>
            </span>
    </el-dialog>

    <el-dialog
      title="查看答卷"
      :visible.sync="viewAnswerVisible"
      width="70%"
      @close="viewDialogClosed">
      <el-container>
        <el-main class="content_style" style="margin-right: 15px;">
          <el-container>
            <el-header class="other_header" style="height: 40px;line-height: 40px;text-align: center; color:#5D9CEC ;">
              智力能力测试卷
            </el-header>
            <el-main>
              <el-row>
                <el-row :class="`classabc${index+1}`" v-for="(item,index) in datalist" style="margin-bottom: 20px;">
                  <el-col span="2">
                    <el-button class="i_style">{{ index + 1 }}</el-button>
                  </el-col>
                  <el-col span="21">
                    <el-row style="border-bottom: 1px solid rgb(228,228,228);line-height: 40px;height: 40px;">
                      {{ item.title }}
                    </el-row>
                    <el-row style="margin-top: 20px;" v-for="citem in item.result">
                      <a @click="gotobutton(index)">
                        <el-radio v-model="item.radio" :label="citem.outanswer" disabled>{{ citem.outcome }}</el-radio>
                      </a>
                    </el-row>
                  </el-col>
                </el-row>
              </el-row>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="viewAnswerVisible= false">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog title="批量查看答卷信息"
               :visible.sync="isShowData"
               width="23%"
               @close="viewDialogClosed">
      <el-card id="chart1" ref="chart1" style="width: 400px;height: 300px"></el-card>
      <el-card id="chart2" ref="chart2" style="width: 400px;height: 300px"></el-card>
      <el-card id="chart3" ref="chart3" style="width: 400px;height: 300px"></el-card>

      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isShowData= false">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      config_type: {
        data: [
          {
            name: 'A',
            value: 110
          },
          {
            name: 'B',
            value: 35
          },
          {
            name: 'C',
            value: 75
          },
          {
            name: 'D',
            value: 50
          }
        ],
        digitalFlopStyle: {
          fontSize: 25,
          fill: '#31a4c5'
        },
        radius: '65%',
        activeRadius: '72%',
        color: ['#2a6f9a', '#79c5f5', '#93e079', '#f5e23e']
      },
      showModal: false,
      isShowData: false,
      grades: 0,
      datalist: [{
        title: '如果地球对应的是球，那么煎饼对应的是？',
        answer: 'A',
        radio: 'A',
        show: '',
        result: [{
          outanswer: 'A',
          outcome: '平坦',
        }, {
          outanswer: 'B',
          outcome: '旗子',
        }, {
          outanswer: 'C',
          outcome: '足球',
        }, {
          outanswer: 'D',
          outcome: '圆盘',
        }]
      }, {
        title: '条件1:所有的法国人都是正常人；条件2:所有的法国人都是喝酒的人；那么我们能得到的结论是:',
        answer: 'A',
        radio: 'D',
        show: '',
        result: [{
          outanswer: 'A',
          outcome: '至少有部分喝酒的人市正常的',
        }, {
          outanswer: 'B',
          outcome: '没有正常人是喝酒的人',
        }, {
          outanswer: 'C',
          outcome: '没有喝酒的人是正常人',
        }]
      }, {
        title: '根据规律选出的数 0  1  3  6  10  ？',
        answer: 'A',
        radio: 'A',
        show: '',
        result: [{
          outanswer: 'A',
          outcome: '16',
        }, {
          outanswer: 'B',
          outcome: '15',
        }, {
          outanswer: 'C',
          outcome: '12',
        }, {
          outanswer: 'D',
          outcome: '6',
        }]
      }],
      // 已选中的校色id值
      x: 1,
      rowIndex: 1,
      selectedRoleId: '',
      // 所有角色的数据列表
      rolesList: [],
      // 需要被分配权限的用户信息
      userInfo: {},
      // 是否显示分配角色对话框
      setRoleDialogVisible: false,
      viewAnswerVisible: false,
      // 查询到的用户信息对象
      editForm: {
        id: 666,
        title: '',
        description: '',
        startTime: '',
        endTime: '',
        createTime: ''
      },
      editFormRules: {},
      // 控制修改用户对话框的显示和隐藏
      editDialogVisible: false,
      // 控制添加用户对话框的显示和隐藏
      addDialogVisible: false,
      // 添加用户的表单数据
      // id: 1,
      addForm: {
        title: '',
        description: '',
        startTime: '',
        endTime: '',
        createTime: ''
      },
      // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        pagesize: 10
      },
      // 控制修改用户对话框的显示和隐藏
      viewDialogVisible: false,
      queryInfoForReplier: {
        pagenum: 1,
        pagesize: 5
      },
      // 答者列表信息
      answerlist: [{
        username: '20204566',
        id: '1234',
        name: '张洞洞租',
        phone: '13188723672',
        email: '55588832@qq.com'
      }, {
        username: '20204599',
        id: '1277',
        name: '唐唐',
        phone: '13188723689',
        email: '55588387@qq.com'
      }],
      answertotal: 2,
      showAnswerList: [],
      // 保存一个用户列表信息
      questionList: [],
      total: 4,
      showUserList: [],
      defaultTime: new Date().getTime(),
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.addForm.endTime) {
            // 大于是在之前的，小于是在之后的
            if (this.addForm.createTime) {
              return time.getTime() < new Date(this.addForm.createTime).getTime() || time.getTime() > new Date(this.addForm.endTime).getTime()
            }
            return time.getTime() > new Date(this.addForm.endTime).getTime() || time.getTime() < Date.now() - 86400000
          }
          return time.getTime() < Date.now() - 86400000
        }
      },
      pickerOption: {
        disabledDate: (time) => {
          if (this.addForm.startTime) {
            return time.getTime() > new Date(this.addForm.startTime).getTime() || time.getTime() < Date.now() - 86400000
          }
          if (this.addForm.endTime) {
            return time.getTime() > new Date(this.addForm.startTime) || time.getTime() > new Date(this.addForm.endTime)
          }
          return time.getTime() < Date.now() - 86400000
        }
      },
      // 结束时间限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.addForm.startTime) {
            return time.getTime() < new Date(this.addForm.startTime).getTime()
          }
          return time.getTime() < Date.now() - 86400000
        }
      }
    }
  },
  created () {
    this.getQuestionnaireList()
  },
  mounted () {
/*     this.initChart1()
    this.initChart2()
    this.initChart3() */
  },
  methods: {
    showData () {

      this.isShowData = true
      this.$nextTick(() => {  //使用this.$nexTick方法进行渲染
        this.initChart1() //Echarts的渲染函数
        this.initChart2() //Echarts的渲染函数
        this.initChart3() //Echarts的渲染函数mou
      })
    },
    Submit (i) {
      var wei = 'classabc' + i
      var el = document.getElementsByClassName(wei)[0]
      console.log(el.offsetTop)
      this.$nextTick(function () {
        window.scrollTo({
          'behavior': 'smooth',
          'top': el.offsetTop
        })
      })
    },
    /*  PritfGrade () {
       let a
       for (a in this.$data.datalist) {
         if (this.$data.datalist[a].answer === this.$data.datalist[a].radio) {
           this.$data.grades = this.$data.grades + 1
         }
       }
       alert('提交成功')
     }, */
    gotobutton (index) {
      this.$data.datalist[index].show = 'background: #00ABEA;'
    },
    showAnswer () {
      this.viewAnswerVisible = true
    },
    // 展示答者名单的对话框
    async showviewDialog (id) {
      // 给答者表赋值
      await this.getAnswerList(id)
      this.viewDialogVisible = true
    },
    AnhandleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getAnswerList()
    },
    // 监听页码值改变的事件
    AnhandleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getAnswerList()
    },
    viewDialogClosed () {
      // this.$refs.viewFormRef.resetFields()
    },
    // 获取答者列表并分页
    getAnswerList (id) {
      this.showAnswerList = []
      let len = this.answerlist.length
      const searchAnswerList = []
      for (let i = 0; i < len; i++) {
        const answer = this.answerlist[i]
        // if (this.queryInfo.query !== '') {
        //   if (answer.name.indexOf(this.queryInfo.query) !== -1) {
        //     searchAnswerList.push(answer)
        //   }
        // } else {
        searchAnswerList.push(answer)
        // }
      }
      // 获取对应的记录列表
      const start = (this.queryInfoForReplier.pagenum - 1) * this.queryInfoForReplier.pagesize
      len = searchAnswerList.length
      for (let i = 0; i < len; i++) {
        if (i >= start && i < start + this.queryInfoForReplier.pagesize) {
          const answer = searchAnswerList[i]
          this.showAnswerList.push(answer)
        }
      }
      this.answertotal = searchAnswerList.length
      console.log(555)
      console.log(this.showAnswerList)
    },
    tableRowClassName ({
                         row,
                         rowIndex
                       }) {
      row.row_index = rowIndex
    },
    onRowClick (row, event, column) {
      this.rowIndex = row.row_index
    },
    // 根据id进行用户信息的删除
    async removeQuestionById (id) {
      // 弹框进行提示，询问用户是否删除数据
      const confirmResult = await this.$confirm('此操作将永久删除该问卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        return err
      })
      if(id===13){
        this.$message.error('问卷正在进行中,删除问卷失败')
        return
      }
      // 如果用户确认删除，则返回confirm
      // 如果用户取消删除，则返回cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      // 发起请求进行用户删除
      const {
        data
      } = await this.$http.delete('questionnaire/delete/' + id).then((res) => {
        if (res.data.code !== 200) {
          return this.$message.error('删除问卷失败')
        }
        this.questionList.length--
        this.$message.error('删除问卷成功')
        this.getQuestionnaireList()
      })
    },
    // 修改用户信息并提交
    editQuestion () {
      this.$axios.put('questionnaire/edit', this.editForm).then((res) => {
        if (res.data.code === 200) {
          console.log(res)
          this.getQuestionnaireList()
          this.$message.success('更新用户信息成功')
        } else {
          this.$message.error('更新用户信息失败')
        }
        // 关闭对话框
        this.showEditDialog = false
        // 刷新数据列表
        this.editDialogVisible = false
      })
    },
    // 监听修改用户对话框的关闭事件
    editDialogClosed () {
      // 对表单字段内容重置
      this.$refs.editFormRef.resetFields()
    },
    // 展示编辑用户的对话框
    async showEditDialog (row) {
      // 发起一个http请求
      // const {data,res} = await this.$http.get('users/' + id)
      // if(res.meta.status !== 200){
      //     return this.$message.error('查询用户信息失败')
      // }

      // //给编辑表单数据进行赋值
      // this.editForm = res.data;
      this.editForm = {
        id: row.id,
        title: row.title,
        description: row.description,
        createTime: row.createTime,
        startTime: row.startTime,
        endTime: row.endTime
      }
      console.log(this.editForm)
      // 显示对话框
      this.editDialogVisible = true
    },
    // 点击按钮，添加新用户
    addUser () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) {
          return
        }
        // 发起一个添加用户的http请求
        // const {data:res} = await this.$http.post('users',this.addForm.id);
        // if(res.meta.status !== 201){
        //     this.$message.error('添加用户失败')
        // }
        // this.$message.success('添加问卷成功')
        // 隐藏对话框
        this.addDialogVisible = false
        this.questionList.push({
          title: this.addForm.title,
          description: this.addForm.description,
          createTime: this.addForm.createTime,
          startTime: this.addForm.startTime,
          endTime: this.addForm.endTime
        })
      })
      this.$http.post('/questionnaire/add', {
        title: this.addForm.title,
        description: this.addForm.description,
        createTime: this.addForm.createTime,
        startTime: this.addForm.startTime,
        endTime: this.addForm.endTime
      }).then(({ data }) => {
        if (data.code === 200) {
          this.$message.success('添加问卷成功')
          // location.reload()
        } else {
          this.$message.error('添加问卷失败')
        }
      })
      this.getQuestionnaireList()
      this.$router.push('/createQuestion')
      this.$router.push({
        path: '/createQuestion',
        query: {
          title: this.addForm.title,
          description: this.addForm.description,
          id: this.editForm.id
        }
      })
    },
    // 监听添加用户对话框的关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    // 监听switch用户状态开关的改变
    userStateChanged (userinfo) {
      // 打印状态信息
      console.log(userinfo.mg_state)
      // 这里应该发送http请求
      var len = this.questionList.length
      for (var i = 0; i < len; i++) {
        var user = this.questionList[i]
        if (user.id === userinfo.id) {
          user.mg_state = userinfo.mg_state
        }
      }
      this.getQuestionnaireList()
    },
    // 监听pageSize改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getQuestionnaireList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getQuestionnaireList()
    },
    question () {
      this.$router.push({
        path: '/createQuestion',
        query: {
          id: this.editForm.id,
          title: this.editForm.title,
          description: this.editForm.description
        }
      })
    },
    getQuestionnaireList () {
      let i
      // 请求获取用户列表信息
      let question
      this.$http.get('questionnaire/list').then((res) => {
        if (res.data.code === 200) {
          console.log(res.data.data)
          this.questionList = res.data.data
          this.showUserList = []
          let len = this.questionList.length
          const searchUserList = []
          for (i = 0; i < len; i++) {
            question = this.questionList[i]
            if (this.queryInfo.query !== '') {
              if (question.title.indexOf(this.queryInfo.query) !== -1) {
                searchUserList.push(question)
              }
            } else {
              searchUserList.push(question)
            }
          }
          // //获取对应的记录列表
          var start = (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize
          len = searchUserList.length
          for (i = 0; i < len; i++) {
            if (i >= start && i < start + this.queryInfo.pagesize) {
              question = searchUserList[i]
              this.showUserList.push(question)
            }
          }
          this.total = searchUserList.length
        }
      })
    },
    initChart1 () {
      const chart2 = echarts.init(document.getElementById('chart1'))

      // 订单状态
      const option = {
        title: {
          text: '问题一',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['A','B','C','D'],
        },
        series: [
          {
            name: '题目统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {
                value: 225,
                name: 'A'
              },
              {
                value: 420,
                name: 'B'
              },
              {
                value: 101,
                name: 'C'
              },
              {
                value: 169,
                name: 'D'
              },
            ],
            // data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      // 对数据进行处理
      chart2.setOption(option)
    },
    initChart2 () {
      const chart2 = echarts.init(document.getElementById('chart2'))


      // 订单状态
      const option = {
        title: {
          text: '问题2',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['A','B','C','D'],
        },
        series: [
          {
            name: '题目统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {
                value: 35,
                name: 'A'
              },
              {
                value: 402,
                name: 'B'
              },
              {
                value: 384,
                name: 'C'
              },
              {
                value: 193,
                name: 'D'
              },
            ],
            // data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      // 对数据进行处理
      chart2.setOption(option)
    },
    initChart3 () {
      const chart2 = echarts.init(document.getElementById('chart3'))


      // 订单状态
      const option = {
        title: {
          text: '问题3',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: ['A','B','C','D'],
        },
        series: [
          {
            name: '题目统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {
                value: 335,
                name: 'A'
              },
              {
                value: 310,
                name: 'B'
              },
              {
                value: 234,
                name: 'C'
              },
              {
                value: 135,
                name: 'D'
              },
            ],
            // data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      // 对数据进行处理
      chart2.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}


.header_style {
  margin-top: 5px;
  border: 1px solid rgb(228, 228, 228);
  text-align: left;
  padding-left: 10px;
}

.other_header {
  background: rgb(255, 255, 255);
  font-size: 20px;
  //font-weight: 400px;
  color: rgb(143, 201, 211);

}

.content_style {
  border: 1px solid rgb(228, 228, 228);
  text-align: left;
  padding-left: 10px;
}

.button_style {
  margin-top: 10px;
  margin-left: 18px;
  margin-left: 10px;
  width: 60px;
  text-align: center;
}

.i_style {
  background: rgb(93, 156, 236);
  font-weight: bold;
  border-radius: 50%;
}

/deep/ .el-radio__inner {
}

.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}

.pop {
  background-color: #fff;
  position: fixed;
  top: 300px;
  left: 550px;
  width: calc(100% - 1000px);
  height: calc(100% - 570px);
  z-index: 2
}

.btn {
  background-color: rgb(93, 156, 236);;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
.el-dialog {
  background-color: rgb(160, 207, 255);
}
</style>
